import React from 'react'
import Select from '../ui-components/select'
import style from './style'
import Code from './Code'

export default 
class Test extends React.Component {

	state = {
		selectOne: '',
		selectTwo: ''
	}

	componentDidMount() {
		this.setState({
			selectOne: this.refs.selectOne.val(),
			selectTwo: this.refs.selectTwo.val()
		})

		setTimeout(() => {
			this.refs.selectOne.val('1.2')
		}, 2000)

		setTimeout(() => {
			this.refs.selectTwo.index(2)
		}, 2000)
	}

	render() {
		return (
			<div className={style.root}>
				<Code>{'<Select>{..}</Select>'}</Code>
				<div>
					<Select ref='selectOne' onChange={e => { this.setState({selectOne: e.target.value}) } }>
						<option value='1.1'>Option 1.1</option>
						<option value='1.2'>Option 1.2</option>
						<option value='1.3'>Option 1.3</option>
					</Select>
					<p style={{'marginLeft': '10px'}}>选择: { this.state.selectOne }</p>
				</div>
				<div>
					<Select ref='selectTwo' onChange={e => { this.setState({selectTwo: e.target.value}) } }>
						<optgroup label="Group 1">
							<option value='1.1'>Option 1.1</option>
						</optgroup> 
						<optgroup label="Group 2">
							<option value='2.1'>Option 2.1</option>
							<option value='2.2'>Option 2.2</option>
						</optgroup>
						<optgroup label="Group 3">
							<option value='3.1'>Option 3.1</option>
							<option value='3.2'>Option 3.2</option>
							<option value='3.3'>Option 3.3</option>
						</optgroup>
					</Select>
					<p style={{'marginLeft': '10px'}}>选择: { this.state.selectTwo }</p>
				</div>
        <div>
					<Select disabled value='1.1' onChange={e => { this.setState({selectOne: e.target.value}) } }>
						<option value='1.1'>Option 1.1</option>
						<option value='1.2'>Option 1.2</option>
						<option value='1.3'>Option 1.3</option>
					</Select>
        </div>
			</div>
		)
	}
}
